<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript：简单小例子</title>
</head>
<body>
    <!-- 直接写入 HTML 输出流、对事件的反应 -->
    <!-- <p>JavaScript能够直接写入HTML输出流中。</p>
    <script>
        document.write("<h1>这是一个h1标题。</h1>")
        document.write("<p>这是一个段落。</p>")
    </script>
    <p>你只能在HTML输出流中使用<strong>document.write</strong> 
        如果在文档已加载后使用它（比如函数中），会覆盖整个文档。</p>

        <button type="button" onclick="alert('hello 双双!')">click me!</button> -->
        <!-- _______________________________________________________ -->
        <!-- JavaScript：改变 HTML 内容 -->
        <!-- <p id="demo">javascript can change content of html.</p>
        <script>
            function myFunction(){
                x=document.getElementById("demo");//find element
                x.innerHTML="hello hello hello 双双！！！"
            }
        </script>
        <button type="button" onclick="myFunction()">click me</button> -->
        <!-- _______________________________________________________ -->
        <!-- 改变HTML图像 -->   
        <script>
            function changeImage(){
            
                element=document.getElementById('myimage');
                if(element.src.match("yellow")){
                    element.src="lightBulb.png";
                }else {
                    element.src="lightBulb-yellow.png"
                }
            }
        </script>
        <img id="myimage" onclick="changeImage()" src="lightBulb.png" width="100" height="100">
        <p>点击灯泡就可以打开或关闭这盏灯</p>
        <!-- _______________________________________________________ -->
        <!-- JavaScript 能改变 HTML 元素的样式。 -->
        <!-- <p id="demo">双双最棒啦啦！</p>
        <script>
            function myFunction(){
                x=document.getElementById("demo");//找到元素
                x.style.color="#ff0000";//改变样式
            }
        </script>
        <button type="button" onclick="myFunction()">click me</button> -->
        <!-- _______________________________________________________ -->
        <p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
        <input id="demo" type="text">
        <button type="button" onclick="myFunction()">click me</button>
        <script>
            function myFunction(){
                var x=document.getElementById("demo");
                if(x==""||isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
                    alert("不是数字");
                }
            }
        </script>

</body>
</html>